<template>
	<div>
		<the-header-top></the-header-top>
		<logo-bar></logo-bar>

		<div class="quota">
			<div class="quota-wapper">
				<v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>

				<div class="quota-container">
					<v-ring :bg-color="bgColor" :cover-color="coverColor" :percent="percent" :width="width" :line-width="lineWidth">
						<p class="mask-tip">{{$t('message.PersonalQuotaAllowed')}}</p>
						<p class="mask-current">{{ currentCredit }}</p>
					</v-ring>
					<div class="title">{{$t('message.PersonalQuotaTotal')}}：<span>฿{{ totalCredit }}</span></div>
					<div class="tip">{{$t('message.PersonalQuotaDescribe')}}</div>
					<div class="btn-group">
						<button class="btn btn-gradient" type="button" @click="showDialog">{{$t('message.applyRaiseQuotaTitle')}}</button>
						<button class="btn btn-white" type="button" @click="toHelp">{{$t('message.applyRaiseQuotaBtnHelp')}}</button>
					</div>
				</div>
			</div>
		</div>
    <v-dialog v-if="status">
      <div class="quota1">
        <!--关闭按钮-->
        <div class="close" @click="closeDialog"></div>
        <!--不合格-->
        <template v-if="status === 'unqualified'">
          <img class="background" src="../../assets/images/personal/illustration_unqualified.png"/>
          <div class="title1">{{$t('message.canNoincrease')}}</div>
          <div class="tips">{{$t('message.canNoincreaseReason')}}</div>
          <div class="btn-group">
            <button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.yes')}}</button>
          </div>
        </template>
        <!--审核中-->
        <template v-if="status === 'underReview'">
          <img class="background" src="../../assets/images/personal/illustration_underReview.png"/>
          <div class="title1">{{$t('message.increasing')}}</div>
          <div class="tips">{{$t('message.noRepeatIncreasing')}}</div>
          <div class="btn-group">
            <button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.yes')}}</button>
          </div>
        </template>
        <!--申请-->
        <template v-if="status === 'apply'">
          <img class="background" src="../../assets/images/personal/illustration_apply.png"/>
          <div class="title1">{{$t('message.applyRaiseQuotaTitle')}}</div>
          <div class="tips">{{$t('message.applyRaiseQuotaContent')}}</div>
          <div class="btn-group">
            <button class="btn btn-gradient" type="button" @click="apply">{{$t('message.applyRaiseQuotaBtnApply')}}</button>
            <button class="btn btn-white" type="button" @click="toHelp">{{$t('message.applyRaiseQuotaBtnHelp')}}</button>
          </div>
        </template>
        <!--成功-->
        <template v-if="status === 'submit'">
          <img class="background" src="../../assets/images/personal/illustration_apply_sucess.png"/>
          <div class="title1">{{$t('message.applyRaiseQuotaSuccessTitle')}}</div>
          <div class="tips">{{$t('message.applyRaiseQuotaSuccessContent')}}</div>
          <div class="btn-group">
            <button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.applyRaiseQuotaSuccessBtn')}}</button>
          </div>
        </template>
      </div>
    </v-dialog>
	</div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VBreadcrumb from '@/components/base/VBreadcrumb'
import VRing from '@/components/base/VRing'
import VDialog from '@/components/base/VDialog'

export default {
  name: 'PersonalQuota',
  components: {
    TheHeaderTop,
    LogoBar,
    VBreadcrumb,
    VRing,
    VDialog
  },
  data () {
    return {
      coverColor: ['#f8b42d', '#ff772e'],
      bgColor: '#f1f1f1',
      totalCredit: 0,
      currentCredit: 0,
      width: 180,
      lineWidth: 12,
      status: ''
    }
  },
  created () {
    this.getOrderLimit()
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
  },
  computed: {
    breadcrumb () {
      return [
        {
          name: this.$t('message.home'),
          path: '/'
        },
        {
          name: this.$t('message.personalCenter'),
          path: '/personal'
        },
        {
          name: this.$t('message.myCredit'),
          path: ''
        }
      ]
    },
    percent () {
      return this.currentCredit / this.totalCredit
    }
  },
  methods: {
    getOrderLimit () {
      this.$ajax.getOrderlimit().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.totalCredit = res.data.total_quota
          this.currentCredit = res.data.current_quota
        }
      })
    },
    closeDialog () {
      this.status = ''
    },
    apply () {
      this.$ajax.raiseQuota().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.status = 'submit'
        }
      })
    },
    toHelp () {
      this.$router.push({ path: '/help' })
    },
    showDialog () {
      this.$ajax.canRaiseQuota().then((res) => {
        if (res.code === 200) {
          // this.status = 'apply'
          this.$ajax.raiseQuota().then((res) => {
            console.log(res)
            if (res.code === 200) {
              this.status = 'submit'
            } else {
              console.log('something is wrong')
            }
          })
        } else if (res.code === 202 || res.code === 203) {
          this.status = 'unqualified'
        } else if (res.code === 204) {
          this.status = 'underReview'
        }
      })
    }
  }
}
</script>

<style scoped>
.quota1 .btn {
  width: 132px;
  height: 46px;
  border-radius: 4px;
  cursor: pointer;
}
.quota1 .btn-group {
  font-size: 0;
  text-align: center;
  margin-top: 40px;
}
.quota1 .tips {
  line-height: 20px;
  color: #666;
  text-align: center;
  margin-top: 18px;
}
.quota1 .title1 {
  line-height: 30px;
  font-size: 22px;
  text-align: center;
  padding-top: 123px;
}
.background {
  width: 220px;
  height: 184px;
  position: absolute;
  top: -85px;
  left: 50%;
  margin-left: -110px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.close {
  width: 16px;
  height: 16px;
  background: url(../../assets/images/icon_close.png) no-repeat center;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.quota {
	min-width: 1200px;
	background-color: #f5f5f5;
	padding: 20px 0 40px;
}

.quota1 {
  width: 500px;
  padding-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
}
.quota-wapper {
	width: 1200px;
	margin: 0 auto;
}

.quota-container {
	margin-top: 20px;
	padding: 80px 0;
	background-color: #fff;
}

.mask-tip {
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #a5a5a5;
	text-align: center;
	margin-top: 50px;
}

.mask-current {
	line-height: 42px;
	font-size: 30px;
	color: #ff600a;
	text-align: center;
	margin-top: 2px;
}

.title {
	height: 25px;
	line-height: 25px;
	font-size: 18px;
	text-align: center;
	margin-top: 42px;
}

.title span {
	font-size: 20px;
	color: #ff600a;
}

.tip {
	width: 616px;
	margin: 25px auto 0;
	line-height: 24px;
	color: #a5a5a5;
	text-align: center;
}

.btn-group {
	height: 46px;
	text-align: center;
	margin-top: 40px;
	font-size: 0;
}

.btn {
	width: 140px;
	height: 46px;
	border-radius: 4px;
	cursor: pointer;
}

.btn-gradient {
	border: 0;
	color: #fff;
}

.btn-white {
	margin-left: 20px;
}
</style>
